<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${b.blName+'阅读'}"></title>
    <style>
        .span_text{
            font-size: medium;
            color: #333030;
        }
    </style>
</head>
<script type="application/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<body>
    <div th:include="common/top"></div>
    <div style="background-color: #f1efef;width: 100%;height: 350px;margin-top: 1%">
        <div style="padding-top: 3%;padding-left: 8%;width: 90%;height: 94%">
            <div class="img" style="float: left;width: 230px;height: auto">
            <div style="width: 195px;height: 260px;border: 1px #e8e6e6 solid">
                    <img th:if="${b.fileInfo==null}" src="../../img/logo.jpg" alt="书籍封面" width="195px" height="260px" >
                    <img th:if="${b.fileInfo!=null}" th:src="'../../upload/'+${b.fileInfo.fUrl}" alt="书籍封面" width="195px" height="260px" >
            </div>
            </div>
            <div class="text" style="width: 100%;height: auto;">
<!--                <span class="big_text"  th:text="${b.blName}"></span>-->
                <h2>
                    <span th:text="${b.blName}"></span>&nbsp;&nbsp;&nbsp;
                    <span style="color: #f99e01" th:if="${b.avgScore!=null}" th:text="${b.avgScore.toString().substring(0,b.avgScore.toString().indexOf('.')+2)+'分'}"></span>
                    <span style="color: #f99e01" th:if="${b.avgScore==null}">暂无评分</span>
                </h2>
                <span>
                    <span class="span_text" style="background-color: #05a805;border-radius: 4px;color: white" th:if="${b.blSpeed==1}">连载中</span>
                    <span class="span_text" style="background-color: #f99e01;border-radius: 4px;color: white" th:if="${b.blSpeed==0}">完结</span>&nbsp;&nbsp;
                    <span class="span_text" style="border: 1px #333030 solid;border-radius: 4px;" th:if="${b.blSignstatus==3}">签约作品</span>
                    <span class="span_text" style="border: 1px #333030 solid;border-radius: 4px;" th:if="${b.blSignstatus!=3}">非签作品</span> &nbsp;&nbsp;&nbsp;
                    <span style="border: 1px #333030 solid;border-radius: 4px;" class="span_text" th:text="${b.type.tName}"></span>
                </span>
                <br><br><br>
                <p>
                    <span class="span_text">
                        作者：<th:block th:text="${b.author.aName}"></th:block>&nbsp;&nbsp;
                    </span>
                </p>
                <p>
                    <span class="span_text" th:if="${b.sumNum<10000}" th:text="${b.sumNum+'字'}"></span>
                    <span class="span_text" th:if="${b.sumNum>=10000}" th:text="${b.sumNum/10000.0+'万字'}"></span>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <span class="span_text" th:if="${b.blCount<10000}" th:text="${b.blCount+'次阅读'}"></span>
                    <span class="span_text" th:if="${b.blCount>=10000}" th:text="${b.blCount/10000.0+'万次阅读'}"></span>
                </p>
                <p class="span_text">
                    <th:block th:if="${b.books.size()>0}" th:text="${'更新至：'+b.books.get(b.books.size()-1).bChaptername}"></th:block>&nbsp;&nbsp;
                    <th:block th:text="${b.newDate}"></th:block>
                </p>
            </div>
            <div style="float: right;margin-right: 200px;margin-top: -60px;width: 240px;height: 180px;">
                <button th:onclick="|startReadBook(${b.blId})|" style="background-color: #f99e01; width: 100px;height: 40px;text-align: center;border: none;line-height: 20px;border-radius: 5px;">开始阅读</button>
                <button th:if="${!flag}" th:onclick="|addShelf(${b.blId})|" style="background-color: whitesmoke; width: 100px;height: 40px;text-align: center;line-height: 20px;border: 1px #f99e01 solid;border-radius: 5px;" class="btn preBtn">加入书架</button>
                <button th:if="${flag}" style="background-color: whitesmoke; width: 100px;height: 40px;text-align: center;line-height: 20px;border: 1px #f99e01 solid;border-radius: 5px;" class="btn preBtn" disabled>已在书架</button>
                <div style="position: absolute; top: 50%;margin-left: 240px ">
                    <a href="#" th:onclick="report([[${b.blId}]],[[${b.blName}]],[[${b.author.aName}]])" style="cursor: pointer">
                        <img src="../../img/icon/green_pixel_141.gif" style="position: absolute;margin-top: 3px;">
                        <span style="color: #5e5e5e;font-size: 14px;margin-left: 20px;">举报</span>
                    </a>

                </div>

            </div>
        </div>
    </div>
    <br>
    <div style="margin-left: 8%">
        <hr style="display:inline-block;width: 90%;color: #e5e3e3;">
        <h2>作品简介</h2><br>
        <p th:text="${b.blInfo}"></p>
        <br><hr style="display:inline-block;width: 90%;color: #e5e3e3;">
        <div th:include="common/readCatalog"></div>
        <br><br><br><hr style="display:inline-block;width: 90%;color: #e5e3e3;">
    </div>
    <div style="display:inline-block;width: 100%;text-align: center" th:include="common/buttom"></div>
</body>
<script>
    function startReadBook(blId){
        location.href="/book/queryChapterById?blId="+blId;
    }
    function addShelf(blId) {
        $.ajax({
            url:"/bookshelf/addShelf",
            type:"post",
            data:{"blId":blId},
            dataType:"text",
            success:function (data){
                if (data==1){//用户已登录，加入书架成功
                    location.reload();
                }else {//用户未登录，跳转到登录页面
                    location.href="/user/toLoginReader";
                }
            }
        })
    }

    //举报
    function report(bookid,bookname,bookauthor) {
       let url = "/book/reportBook?reBookid="+bookid+"&reBookname="+bookname+"&reBookauthor="+bookauthor;
       let w = 480;
       let h = 380;
       var left=(window.screen.width-w)/2;
       var top=(window.screen.height-h)/2;
       window.open(url, "_blank", "height="+h+", width="+w+", top="+top+", left="+left+", toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
    }
</script>
</html>